<script setup>
import { useUserStore } from '@/stores/user'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()
</script>

<template>
  <div class="profile-page">
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    
    <div class="profile-content">
      <van-cell-group>
        <van-cell title="头像" center>
          <template #right-icon>
            <img :src="userStore.avatar" class="avatar" />
          </template>
        </van-cell>
        <van-cell title="用户名" :value="userStore.username" />
        <van-cell title="ID" :value="userStore.uid" />
        <van-cell title="邮箱" :value="userStore.email" />
        <van-cell title="年龄" :value="userStore.age" />
        <van-cell title="地址" :value="userStore.address" />
        <van-cell title="大学" :value="userStore.university" />
        <van-cell title="签名" :value="userStore.signature" />
        <van-cell title="点赞数" :value="userStore.likeCount" />
        <van-cell title="关注数" :value="userStore.concernCount" />
        <van-cell title="粉丝数" :value="userStore.vermicelliCount" />
        <van-cell title="收藏数" :value="userStore.favoriteCount" />
        <van-cell title="文章数" :value="userStore.articleCount" />
      </van-cell-group>

      <div class="action-buttons">
        <van-button type="primary" block @click="router.push('/user/edit')">
          修改信息
        </van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.profile-page {
  min-height: 100vh;
  background: #f8f8f8;

  .profile-content {
    padding: 20px;

    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    .action-buttons {
      margin-top: 30px;
      padding: 0 16px;
    }
  }
}
</style> 